<template>
    <el-drawer :visible.sync="drawer" direction="rtl" size="58%" :with-header="false" :width="700">
        <div class="drawer_box">
            <div class="drawer_t">
                <div class="drawer_t_l">
                    <img class="drawer_t_l_img"
                        src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="">
                    添加权益
                </div>
                <img class="drawer_t_r" src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
                    alt="" @click="drawer = false">
            </div>
            <div class="drawer_c">
                <el-table ref="multipleTable" :data="portfolioBenefits" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" min-width="3%">
                    </el-table-column>
                    <el-table-column label="权益名称" min-width="30%">
                        <template slot-scope="scope">
                            <div class="scope_name">
                                <img class="table_img" :src="JSON.parse(scope.row.MainPicturePath)[0].url" alt="">
                                {{ scope.row.Name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="权益标签" min-width="20%">
                        <template slot-scope="scope">
                            <div class="scope_label">
                                <!-- <span v-for="(item, index) in scope.row.ProductFlagListName.split('，')" :key="index">{{ item
                                    }}</span> -->
                                <span>{{ scope.row.EquityFlagListName }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" min-width="15%">
                        <template slot-scope="scope">
                            <div class="scope_price">
                                ￥{{ scope.row.CostPrice }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="库存" min-width="10%">
                        <template slot-scope="scope">
                            <div class="scope_price">
                                {{ scope.row.InventoryQuantity }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="起售数量" min-width="10%">
                        <template slot-scope="scope">
                            <div class="scope_price">
                                {{ scope.row.MinimumQuantity }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" min-width="15%">
                        <template slot-scope="scope">
                            <div class="scope_sum">
                                ￥{{ scope.row.CostPrice * scope.row.MinimumQuantity }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="drawer_b">
                <div class="drawer_b_r">
                    <!-- <div class="drawer_list">
                <el-checkbox v-model="selectAll"></el-checkbox>
                全选
              </div> -->
                </div>
                <div class="drawer_b_r">
                    <div class="drawer_list">
                        已选择权益: <span>{{ multipleSelection.length }}</span>件
                    </div>
                    <div class="drawer_list">
                        合计: <span>￥{{ totalMoney }}</span>
                    </div>
                    <span class="drawer_sx" @click="addToFather()">
                        确认
                    </span>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: 'addRefund',
    props: {
        portfolioBenefits:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            octopus: this.$parent.octopus,
            drawer: false,
            selectAll: false,
            multipleSelection: [],
        };
    },
    mounted() {
    },
    computed: {
        totalMoney() {
            return this.multipleSelection.reduce((total, item) => {
                const combinedPrice = item.CostPrice * item.MinimumQuantity;
                return total + combinedPrice;
            }, 0)
        }
    },
    methods: {
        drawerOp(){
            this.drawer = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleClose() {
            this.drawer = false
        },
        addToFather() {
            this.drawer = false
            this.$emit('addRefundList', this.multipleSelection);
        }
    },
};
</script>
<style scoped>
>>> .el-table th>.cell {
    font-weight: bold;
}

>>> .el-table__row {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 设置阴影效果 */
}

>>> .el-table::before {
    display: none;
}

>>> .el-table .el-table__body {
    -webkit-border-vertical-spacing: .8rem;
}

>>> .el-table thead th {
    font-size: 1.6rem;
    color: #575757;
}

>>> .el-table thead th:nth-last-child(2) {
    border-radius: 0 .5rem .5rem 0;
    /* right: 1rem; */
}

>>> .el-table thead th,
>>> .el-table .el-table__row td {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    padding: 1.1rem 0;
}

>>> .el-table thead th:first-child,
>>> .el-table .el-table__row td:first-child {
    border-left: 1px solid #EFEFEF;
    border-radius: 5px 0 0 5px;
}

>>> .el-table .el-table__row>td {
    font-size: 1.4rem;
    color: #333333;
}

>>> .el-table .el-table__row>td:last-child {
    border-radius: 0 5px 5px 0;
    right: 1px;
}

>>> .el-table .el-table__body tr:hover>td.el-table__cell {
    background-color: rgba(0, 110, 255, 0.05);
}

>>> .el-table .el-table__fixed::before {
    display: none;
}

>>> .el-table thead {
    color: #1B1917 !important;
    font-size: 1.8rem;

}

>>> .has-gutter tr {
    background: linear-gradient(to right, #FEFEFE, #FBF9F7) !important;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

>>> .el-table thead th {
    background-color: transparent;
}

>>> .el-table thead th {
    background-color: transparent;
}

>>> .el-input--mini {
    height: 3.5rem;
    line-height: 3.2rem;
}

>>> .el-input-number--mini .el-input-number__decrease {
    width: 3.2rem;
    font-size: 1.8rem;
}

>>> .el-input-number--mini .el-input-number__increase {
    width: 3.2rem;
    font-size: 1.8rem;
}

>>> .el-input-number--mini {
    line-height: 3.2rem;
}

>>> .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #F78C51;
    border-color: #F78C51;
}

>>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #F78C51;
    border-color: #F78C51;
}

>>> .el-message-box--center {
    padding-bottom: 0px;
}

.scope_label {
    display: flex;
    flex-wrap: wrap;
}

.scope_name {
    font-size: 1.6rem;
    display: flex;
}

.scope_label span {
    color: #a1a1a1;
    border: 1px solid #d9d9d9;
    padding: 0px .5rem;
    font-size: 1.3rem;
    margin: .3rem;
    border-radius: .5rem
}

.table_img {
    width: 7rem;
    height: 7rem;
    border-radius: 1rem;
    margin-right: 1rem;
}

.scope_sum {
    font-size: 2rem;
    font-weight: bold;
    color: #F19065;
}

.scope_price {
    font-size: 2rem;
    font-weight: bold;
    color: #191916;
}

.drawer_box {
    padding: 3rem .8rem 3rem 0;
    height: calc(100% - 5rem);
    display: flex;
    flex-direction: column;
}

.drawer_t {
    padding: 0 2.8rem;
    display: flex;
    justify-content: space-between;
}

.drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
}

.drawer_t_l_img {
    width: 2.8rem;
    margin-right: 1rem;
}

.drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.drawer_c {
    height: 80vh;
    overflow: auto;
    margin-top: 3rem;
    padding: 0 3rem;
    background-color: #FDFDFD;
}

.drawer_b {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 1rem;
    width: 100%;
    padding: 0 5rem;
    box-sizing: border-box;
}

.drawer_b_r {
    display: flex;
    align-items: center;
}

.drawer_list {
    margin: 0 1rem;
    font-size: 1.6rem;
}

.drawer_list span {
    color: #F78C51;
    font-weight: bold;
    font-size: 2rem;
    margin: 0 1.3rem;
}

.drawer_sx {
    padding: 1.3rem 5rem;
    background-color: #F78C51;
    color: #fff;
    font-size: 1.6rem;
    border-radius: 1rem;
    margin-left: 1.3rem;
    cursor: pointer;
}
</style>